<template>
  <div>
    <!-- 卡片视图 -->
    <el-card>
      <el-row>
        <el-col :span="8">
          <!-- 搜索框 -->
       <el-input placeholder="请输入内容"  v-model="search" style="width: 200px;">
          </el-input>

          <el-button
            icon="el-icon-refresh"
            type="primary"
            style="  margin-left: 5rem;"
            @click="handleRefresh"
            >刷新</el-button
          >
        </el-col>
      </el-row>
      <br>
      <el-table :data="orderList.filter(
          (data) =>
            !search ||
            data.orderNumber.toLowerCase().includes(search.toLowerCase())
        )" style="width: 100%" 
        border stripe>
        
        <el-table-column
          prop="orderNum"
          label="订单编号"
          width="width"
        ></el-table-column>
        <el-table-column
          prop="allPrice"
          label="订单价格"
          width="width"
        ></el-table-column>
        <el-table-column label="是否付款" width="width">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isPay =='1'"
              >已付款</el-tag
            >
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" width="width">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isSend == '1'"
              >已发货</el-tag
            >
            <el-tag type="danger" v-else>未发货</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" width="width">
          <template slot-scope="scope">{{ scope.row.payTime }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="详情"
            placement="bottom-end"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="small"
              @click="showBox(scope.$index, scope.row)"
            ></el-button>
          </el-tooltip>
          </template>
          
        </el-table-column>
      </el-table>
 <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
      >
      </el-pagination>
    </div>
    </el-card>
  
    
  </div>
</template>
<script>
import common from '../../utils/common'
import {getOrderLists} from "../../api/ord"
export default {
  data() {
    return {
      total:1,
      search:'',
      reverse:'',
      pager: {
        pageIndex:1,
        pageSize: 10,
        rowsTotal: 30,
      },
      orderList: [
        
      ],
    };
  },
  created() {
    this.getOrderList(this.pager);
  },
  methods: {
    getOrderList(pager) {
      getOrderLists(pager).then(({data})=>{
          this.orderList.payTime = common.getDate(this.orderList.payTime);
        this.orderList=data.data.data;
           this.pager = data.data.pager;
      }).catch((err) => {
          console.log(err);
        });
    },
 
     //分页
    handleSizeChange(val) {
      console.log(val);
      this.pager.pageSize = val;
      this.getOrderList(this.pager);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pager.pageIndex = val;
      this.getOrderList(this.pager);
    },
  
    showBox(index,row) {
      console.log(index,row.orderNum);
         localStorage.setItem("orderNum",row.orderNum);
        this.$router.push("./OrderDetails")
    },
    //刷新
    handleRefresh(){
     location.reload();
    }
  },
};
</script>
<style  scoped>
.el-cascader {
  width: 100%;
}
</style>
